<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ES6面向对象写法</title>
</head>
<style>
  .wrapper{
    width: 450px;
    height: 450px;
    margin: 30px auto;
    border: 1px solid black;
  }
  .wrapper .tab{
    width: 100%;
    height: 50px;
    border-bottom: solid 1px black;
  }
  .wrapper .tab .item{
    width: 33.3%;
    height: 100%;
    float: left;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
  }
  .wrapper .tab .item.current{
    background-color: black;
    color: white;
  }
  
  .wrapper .page{
    width: 100%;
    height: 400px;
    position: relative;
    font-size: 50px;
  }
  .wrapper .page .item{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    line-height: 350px;
    display: none;
  }
  .wrapper .page .item.current{
    display: block;
  }

</style>
<body>
  <div class="J_calculator">
    <p>结果: <span class="J_res">0</span></p>
    <p>
      <input type="text" placeholder="第一个数">
      <input type="text" placeholder="第二个数">
    </p>
    <p>
      <button data-field="plus">+</button>
      <button data-field="minus">-</button>
      <button data-field="mul">*</button>
      <button data-field="div">/</button>
    </p>
  </div>

  <!-- 简易选项卡 -->
  <div class="wrapper J_wrappee">
    <div class="tab">
      <div class="item current">tab 1</div>
      <div class="item">tab 2</div>
      <div class="item">tab 3</div>
    </div>
    <div class="page">
      <div class="item current">page 1</div>
      <div class="item">page 2</div>
      <div class="item">page 3</div>
    </div>
  </div>

  <div id="J_defaultData" style="display: none">
    [
      {"titile": "这个是第1个标题", "content": "这是第1个内容"},
      {"titile": "这个是第2个标题", "content": "这是第2个内容"},
      {"titile": "这个是第3个标题", "content": "这是第3个内容"},
    ]
  </div>


</body>
<script>
  function Som(options, fn){
    this.a = options.a;
    this.b = options.b;
    this.push = fn.bind(this);
  }

  Som.prototype.show = function(){
    console.log(this);
  }

  // Som()
  // var from = new Som();
  // console.log(from.a);

  // var from = new Som({
  //   a: 7,
  //   b: 9
  // },function(){
  //   return this.a + this.b;
  // })

  // console.log(from);
  // from.show();
  
  // var mCalculator = (function(){
  //   function plus(val1, val2){
  //     return val1 + val2;
  //   };
  //   function minus(val1, val2){
  //     return val1 - val2;
  //   };
  //   function mul(val1, val2){
  //     return val1 * val2;
  //   };
  //   function div(val1, val2){
  //     return val1 / val2;
  //   };

  //   return {
  //     plus: plus,
  //     minus: minus,
  //     mul: mul,
  //     div: div,
  //   }
  // })()
  // ;(function(doc, win, mCalculator){

  //   var Calculator = function(callback){
  //     this.oCalculator = doc.getElementsByClassName('J_calculator')[0];
  //     this.oFirstInput = this.oCalculator.getElementsByTagName('input')[0];
  //     this.oSirstInput = this.oCalculator.getElementsByTagName("input")[1];
      
  //     this.showResult = callback || function(){
  //       throw new Error('处理结果的逻辑函数没有传入!!!');
  //     }

  //     this.init();
  //   }
    
  //   Calculator.prototype.init = function(){
  //     this.binEvent();
  //   }

  //   Calculator.prototype.binEvent = function(){
  //     this.oCalculator.addEventListener('click', this.onBtnClick.bind(this), false);
  //   }

  //   Calculator.prototype.onBtnClick = function(e){
  //     var e = e || window.event,
  //         tar = e.target || e.srcElement,
  //         tagName = tar.tagName.toLowerCase();

  //     if(tagName === 'button'){
  //       // console.log(1);
  //       var field = tar.getAttribute('data-field'),
  //           val1 = parseInt(this.oFirstInput.value) || 0,
  //           val2 = parseInt(this.oSirstInput.value) || 0;
  //       this.showResult(mCalculator[field](val1, val2));
  //     }
  //   }
  
  //   win.Calculator = Calculator;
  // })(document, window, mCalculator)

  // new Calculator(function(res){
  //   var oRes = document.getElementsByClassName("J_res")[0];
  //   oRes.innerHTML = res;
  // });



class compute{
  constructor(){

  }

  plus(val1, val2){
    return val1 + val2;
  }

  minus(val1, val2){
    return val1 - val2;
  }

  mul(val1, val2){
    return val1 * val2;
  }

  div(val1, val2){
    return val1 / val2;
  }
}

/**
 * class 类
 * extedns 继承
 * super() 父类构造函数
*/
class Calculator extends compute{
  constructor(doc, callback){
    super();
    this.oCalculator = doc.getElementsByClassName('J_calculator')[0];
    this.oFirstInput = this.oCalculator.getElementsByTagName('input')[0];
    this.oSirstInput = this.oCalculator.getElementsByTagName("input")[1];
    
    this.showResult = callback || function(){
      throw new Error('处理结果的逻辑函数没有传入!!!');
    }

    this.init();
  }
  
  init(){
    this.binEvent();
  }

  binEvent(){
    this.oCalculator.addEventListener('click', this.onBtnClick.bind(this), false);
  }

  onBtnClick(e){
    var e = e || window.event,
        tar = e.target || e.srcElement,
        tagName = tar.tagName.toLowerCase();

    if(tagName === 'button'){
      // console.log(1);
      var field = tar.getAttribute('data-field'),
          val1 = parseInt(this.oFirstInput.value) || 0,
          val2 = parseInt(this.oSirstInput.value) || 0;
      this.showResult(this[field](val1, val2));
    }
  }
}
new Calculator(document, function(res){
  var oRes = document.getElementsByClassName("J_res")[0];
  oRes.innerHTML = res;
});


class Tab{
  constructor(options){
    this.oWrapper = options.dom;
    this.oTab = this.oWrapper.getElementsByClassName('tab')[0];
    this.oPage = this.oWrapper.getElementsByClassName('page')[0];
    this.oTabItem = this.oTab.getElementsByClassName('item');
    this.oPageItem = this.oPage.getElementsByClassName('item');
    
    this.curIdx = 0;

    this.init();
  }

  init(){
    this.bindEvent();
  }

  bindEvent(){
    this.oTab.addEventListener('click', this.oTabClick.bind(this), false);
  }

  oTabClick(e){
    var e = e || window.event,
        tar = e.target || e.srcElement,
        className = tar.className;
    // console.log(this);
    if(className === 'item'){
      this.tabChange(tar);
    }
  }

  tabChange(target){
    this.removerCurrent(this.curIdx);
    this.curIdx = [].indexOf.call(this.oTabItem, target);
    this.addCurrent(this.curIdx);
  }

  removerCurrent(index){
    this.oTabItem[index].className = 'item';
    this.oPageItem[index].className = 'item';
  }

  addCurrent(index){
    this.oTabItem[index].className += ' current';
    this.oPageItem[index].className += ' current';
  }


}

new Tab({
  dom: document.getElementsByClassName('J_wrappee')[0],
});



  

</script>
</html>